<template>
  <div class="rich_content editorPG">
    <div class="editorMain" :style="{'margin-top':'5px',height:height + 'px'}">
      <div class="editorBox" :style="{width:width + 'px',height:height + 'px'}">
        <img class="bGImgView" mode="widthFix" :src="currentPosterBg" />
        <PageLoading v-if="!loadingPosterBg" message="背景图加载中"></PageLoading>
        <div class='contentWarp'>
          <block v-for="item in itemList" :key="id">
            <div class='touchWrap' :style="{'transform':'scale('+item.scale+')','top':item.top+'px','left':item.left+'px','z-index':item.active?100:50}">
              <div class="imgWrap" :class=" item.active? 'touchActive':''" :style="{'transform': 'rotate('+item.angle+'deg)',border: item.active ? 2*item.oScale + 'px #fff dotted' : 0}">
                <!-- 编辑的图片 -->
                <img :src='item.image' :data-id='item.id' :style="{width:item.width+'px',height:item.height + 'px'}" @touchstart='WraptouchStart' @touchmove='WraptouchMove' @touchend='WraptouchEnd' mode="widthFix" />
                <!-- 删除图标 -->
                <div class='x' :style="{'transform': 'scale('+item.oScale+')','transform-origin':'center'}" :data-id='item.id' @tap='deleteItem'></div>
                <!-- 缩放图标 -->
                <div class='o' :style="{transform: 'scale('+item.oScale+')','transform-origin':'center'}" :data-id='item.id' @touchstart='oTouchStart' @touchmove='oTouchMove' @touchend='WraptouchEnd'></div>
              </div>
            </div>
          </block>
        </div>
      </div>

    </div>
    <div class="line-t-10"></div>
    <div class="editorOptions" >
      <div class="copy" @tap="downLoadBg">
        <i class="copy-ico"></i>
        <p>保存背景</p>
      </div>
      <div class="save" @tap="savePoster"><i class="save-ico"></i>保存图片</div>
      <button class="share" plain="true" open-type='share'><i class="share-ico"></i>发给好友</button>
    </div>
    <div class="line-t-10"></div>
    <div class="bottomMain" :style="{height:btMainHeight+'px'}">
      <ul class="tab-nav">
        <li class="tab-nav-item" :class="currentTabId == 1?' tab-active':''" @tap="tabPanelChange(1)">换版式</li>
        <li class="tab-nav-item" :class="currentTabId == 2?' tab-active':''" @tap="tabPanelChange(2)">换图</li>
        <!--
        <li class="tab-nav-item" :class="currentTabId == 3?' tab-active':''" @tap="tabPanelChange(3)">换贴纸</li>
        -->
      </ul>
      <div class="tab-panel" :style="{height:btMainHeight-40 +'px'}">
        <div class="tab-panel-item" v-if="currentTabId == 1">
          <scroll-view
            v-if="templateListData.length"
            class="list-scroll"
            :scroll-y="true"
            :style="{height:btMainHeight-40 +'px'}"
          >
            <div @tap="selectTemplate(index)" v-if="templateListData.length" v-for="item in templateListData" :key="index" class="tab-item itemActive">
              <img :src="item.thumb" />
            </div>
          </scroll-view>
          <PageLoading v-if="!picsListData.length"></PageLoading>
        </div>
        <div class="tab-panel-item" v-if="currentTabId == 2">
          <scroll-view
            v-if="picsListData.length"
            class="list-scroll"
            :scroll-y="true"
            :style="{height:btMainHeight-40 +'px'}"
            @scroll="picScroll"
            @scrolltoupper="picScrollToUpper"
            @scrolltolower="picScrollToLower"
          >
            <div @tap="selectPic(index)" v-if="picsListData.length" v-for="item in picsListData" :key="index" class="tab-item itemActive">
              <img :src="item.cdn" />
            </div>
          </scroll-view>
          <PageLoading v-if="!picsListData.length"></PageLoading>
        </div>
        <div class="tab-panel-item" v-if="currentTabId == 3">
          <scroll-view
            v-if="stickersListData.length"
            class="list-scroll"
            :scroll-y="true"
            :style="{height:btMainHeight-40 +'px'}"
          >
            <div @tap="selectSticker(index)" v-if="stickersListData.length" v-for="item in stickersListData" :key="index" class="tab-item itemActive">
              <img :src="item.url" />
            </div>
          </scroll-view>
          <PageLoading v-if="!stickersListData.length"></PageLoading>
        </div>

      </div>

    </div>
    <canvas class='maskCanvas' canvas-id="maskCanvas" :style="{width:canvasWidth + 'px',height:canvasHeight + 'px'}"></canvas>
    <div v-if="!isPainter" style="position:absolute;top: -9999px;left: -9999px;z-index:-99;">
      <painter :customStyle="customStyle"  widthPixels="0" @imgOK="onCurrentBgImgOk" :palette="template" />
    </div>
  </div>
</template>

<script>
import {showToast} from "../../utils";
import {hideLoading, showLoading} from "../../api/wechat";
import {API} from "../../api";
import PageLoading from "../../components/PageLoading";
import {fly} from "../../utils/request";
import {utils} from "../../utils/func";
import NavBar from "../../components/NavBar";

const maskCanvas = wx.createCanvasContext('maskCanvas', this); // 创建 canvas 的绘图上下文 CanvasContext 对象
const marginLR = 0.7;
const originalW = 680;
const customStyle = 'margin:0;padding:0px;'
export default {
  data () {
    return {
      content:"",
      isPainter:false,
      currentTabId:2,
      loadingPosterBg:false,
      btMainHeight:0,
      safeAreaHeight:0,
      maskCanvas:null,
      width:0,
      height:0,
      currentPoster:{},
      currentPosterBg:"",
      currentTemplate:0,
      originalW: originalW,//海报图片原始宽度
      originalH: originalW,//海报图片原始高度
      canvasWidth:originalW,
      canvasHeight:originalW,
      itemList: [],
      index : 0, // 当前点击图片的index
      items : [], // 图片数组信息
      itemId : 1, // 图片id，用于识别点击图片
      hCw : 1, // 图片宽高比
      canvasTemImg:"",
      templateListData:[],
      picsListData:[],
      stickersListData:[],
      pageRandom:0,
      page:1,
      template: {}

    }
  },
  onShareAppMessage(){
    return {
      title:this.content,
      imageUrl:this.currentPoster.cdn,
      path:"/pages/index/main"
    }
  },

  onShow: function (options) {
    let _this = this;
    _this.init();
    _this.content = this.$route.query.content || "";
    // 获取系统参数
    wx.getSystemInfo({
      success: res => {
        _this.safeAreaHeight = res.safeArea.top;
        _this.height = _this.width = res.safeArea.width * marginLR ;// * marginLR
        _this.hCw = 680 / _this.width;
        _this.btMainHeight = res.safeArea.height - _this.height - 50;
        _this.getPageData();
      }
    });

  },
  mounted() {
    let _this = this;

  },
  watch:{
    pageRandom:{
      handler:function(val,oldVal){
        return val;
      },
      deep:true
    },
    content:{
      handler:function(val,oldVal){
        return val;
      },
      deep:true
    }
  },

  components: {
    NavBar,
    PageLoading
  },


  methods: {
    init(){
      let _this = this;
      _this.content = "";
      _this.isPainter = true;
      _this.currentTabId = 2;
      _this.loadingPosterBg = false;
      _this.currentPosterBg = "";
      _this.currentTemplate = 0;
      _this.itemList =[] ;
      _this.index = 0; // 当前点击图片的index
      _this.items  = []; // 图片数组信息
      _this.itemId = 1; // 图片id，用于识别点击图片
      _this.hCw = 1; // 图片宽高比
      _this.canvasTemImg = "";
      _this.templateListData = [];
      _this.picsListData = [];
      _this.stickersListData = [];
      _this.pageRandom =  0;
    },
    getPageData(){
      let _this = this;
      //_this.getStickers()
      fly.all([_this.getTemplates(),_this.getImgs()]).then(fly.spread((templates,getImages,getStickers) => {
        _this._renderTemplate(templates);
        _this._renderImgs(getImages);
        //_this._renderStickers(getStickers);
      }));
    },
    getStickers(){
      return API.getStickers({page:1});
    },

    onCurrentBgImgOk(e){
      let _this = this;
      _this.isPainter = true;
      _this.currentPosterBg = e.mp.detail.path;
      _this.canvasTemImg = e.mp.detail.path;
      _this.loadingPosterBg = true;
    },
    _renderPosterBg(){
      let _this = this;
      API.setTemplate({templateId:_this.currentTemplate,content:_this.content,image:_this.currentPoster.hd}).then( res => {
        _this.template = res.data.template;
        _this.isPainter = false;
      });
    },
    _renderStickers(stickersArr){
      let _this = this;
      if(stickersArr.code == 200){
        if(stickersArr.data.length > 0){
          let data = stickersArr.data;
          if(_this.stickersListData.length == 0){
            _this.stickersListData = data;
          } else {
            _this.stickersListData.push(...data);
          }
          _this.pageRandom =  Math.random();
        } else {
          showToast("暂无更多数据");
        }
      }
    },

    _renderTemplate(templateArr){
      let _this = this;
      if(templateArr.code == 200){
        if(templateArr.data.length > 0){
          let data = templateArr.data;
          if(_this.templateListData.length == 0){
            _this.templateListData = data;
            _this.currentTemplate = 0;
          } else {
            _this.templateListData.push(...data);
          }
          _this.pageRandom =  Math.random();
        } else {
          showToast("暂无更多数据");
        }
      }
    },
    _renderImgs(imgsArr){
      let _this = this;
      if(imgsArr.code == 200){
        if(imgsArr.data.length > 0){
          let data = imgsArr.data;
          if(_this.picsListData.length == 0){
            _this.picsListData = data;
            _this.currentPoster = data[0];
            console.log(_this.picsListData);
            _this._renderPosterBg();
          } else {
            _this.picsListData.push(...data);
          }
          _this.pageRandom =  Math.random();
          _this.page = _this.page +1;
        } else {
          showToast("暂无更多数据");
        }
      }
    },
    getTemplates(){
        return API.getTemplate({});
    },
    selectTemplate(index){
      let _this = this;
      _this.template = {};
      _this.isPainter = false;
      _this.loadingPosterBg = false;
      _this.currentTemplate = index;//_this.templateListData[index];
      _this._renderPosterBg();


    },
    selectPic(index){
      let _this = this;
      _this.template = {};
      _this.isPainter = false;
      _this.loadingPosterBg = false;
      _this.currentPoster = _this.picsListData[index];
      _this._renderPosterBg();
    },
    selectSticker(index){
      let _this = this;
      console.log(index);
      _this.setDropItem({url:_this.stickersListData[index].url});
    },
    getImgs(){
      let _this = this;
      return API.getImgs({imgCatId:0,page:_this.page});
    },
    picScroll(e){
     // console.log(e);
    },
    picScrollToUpper(e){
      console.log('picScrollToUpper',e);
    },
    picScrollToLower(e){
      let _this = this;
      _this.getImgs().then( res => {
        _this._renderImgs(res);
      });
    },
    tabPanelChange(tabId){
      let _this = this;
      _this.currentTabId = tabId;
    },
    downLoadImg(netImgUrl) {
      return new Promise(function(resolve, reject) {
        wx.getImageInfo({
          src: netImgUrl,    //请求的网络图片路径
          success: function (res) {
            resolve(res);
          },
          fail:function (res) {
            reject(res)
          }
        })
      })
    },
    //设置移动的图片
    setDropItem(imgData){
      let _this = this;
      let data = {};
      _this.downLoadImg(imgData.url).then(res => {
        //初始化数据
        let maxWidth = 150;
        let maxHeight = 150;
        if(res.width > maxWidth || res.height > maxHeight){
          if (res.width / res.height > maxWidth / maxHeight) { // 判断比例使用最大值的宽或高作为基数计算
            data.width = maxWidth;
            data.height = Math.round(maxWidth * (res.height / res.width));
          } else {
            data.height = maxHeight;
            data.width = Math.round(maxHeight * (res.width / res.height));
          }
        }
        data.image = res.path; // 显示地址
        data.initImage = res.path; // 原始地址
        data.id = ++_this.itemId; // id
        data.top = 100; // top定位
        data.left = 100; // left定位
        data._lx = 0; //
        data._ly = 0; //
        data.lx = 0; //
        data.ly = 0; //
        // 圆心坐标
        data.x = data.left + data.width / 2;
        data.y = data.top + data.height / 2;
        data.scale = 1; // scale缩放
        data.rotate = 1; // 旋转角度
        data.oScale = 1; //方向缩放
        data.angle = 0; //旋转角度，不定义的话，真机不旋转就不会出现
        data.active = false; // 选中状态
        _this.itemList.push(data);

      });

    },
    WraptouchStart(e){
      let _this = this;
      // 循环图片数组获取点击的图片信息
      for (let i = 0; i < _this.itemList.length; i++) {
        _this.itemList[i].active = false;
        if (e.currentTarget.dataset.id == _this.itemList[i].id) {
          _this.index = i;
          _this.itemList[_this.index].active = true;
        }
      }
      // 获取点击的坐标值
      _this.itemList[_this.index].lx = e.touches[0].clientX;
      _this.itemList[_this.index].ly = e.touches[0].clientY;

    },
    WraptouchMove(e){
      let _this = this;
      _this.itemList[_this.index]._lx = e.touches[0].clientX;
      _this.itemList[_this.index]._ly = e.touches[0].clientY;

      _this.itemList[_this.index].left += _this.itemList[_this.index]._lx - _this.itemList[_this.index].lx;
      _this.itemList[_this.index].top += _this.itemList[_this.index]._ly - _this.itemList[_this.index].ly;
      _this.itemList[_this.index].x += _this.itemList[_this.index]._lx - _this.itemList[_this.index].lx;
      _this.itemList[_this.index].y += _this.itemList[_this.index]._ly - _this.itemList[_this.index].ly;

      _this.itemList[_this.index].lx = e.touches[0].clientX;
      _this.itemList[_this.index].ly = e.touches[0].clientY;
    },
    WraptouchEnd(e){
      this.synthesis(); // 调用合成图方法
    },
    oTouchStart(e) {
      let _this = this;
      //找到点击的那个图片对象，并记录
      for (let i = 0; i < _this.itemList.length; i++) {
        _this.itemList[i].active = false;
        if (e.currentTarget.dataset.id == _this.itemList[i].id) {
          _this.index = i;
          _this.itemList[_this.index].active = true;
        }
      }
      //获取作为移动前角度的坐标
      _this.itemList[_this.index].tx = e.touches[0].clientX;
      _this.itemList[_this.index].ty = e.touches[0].clientY;
      //移动前的角度
      _this.itemList[_this.index].anglePre = _this.countDeg(_this.itemList[_this.index].x, _this.itemList[_this.index].y, _this.itemList[_this.index].tx, _this.itemList[_this.index].ty);
      //获取图片半径
      _this.itemList[_this.index].r = _this.getDistancs(_this.itemList[_this.index].x, _this.itemList[_this.index].y, _this.itemList[_this.index].left, _this.itemList[_this.index].top);
    },
    oTouchMove(e){
      let _this = this;
      //记录移动后的位置
      _this.itemList[_this.index]._tx = e.touches[0].clientX;
      _this.itemList[_this.index]._ty = e.touches[0].clientY;
      //移动的点到圆心的距离
      _this.itemList[_this.index].disPtoO = this.getDistancs(_this.itemList[_this.index].x, _this.itemList[_this.index].y, _this.itemList[_this.index]._tx, _this.itemList[_this.index]._ty - 10)

      _this.itemList[_this.index].scale = _this.itemList[_this.index].disPtoO / _this.itemList[_this.index].r;
      _this.itemList[_this.index].oScale = 1 / _this.itemList[_this.index].scale;

      //移动后位置的角度
      _this.itemList[_this.index].angleNext = this.countDeg(_this.itemList[_this.index].x, _this.itemList[_this.index].y, _this.itemList[_this.index]._tx, _this.itemList[_this.index]._ty)
      //角度差
      _this.itemList[_this.index].new_rotate = _this.itemList[_this.index].angleNext - _this.itemList[_this.index].anglePre;

      //叠加的角度差
      _this.itemList[_this.index].rotate += _this.itemList[_this.index].new_rotate;
      _this.itemList[_this.index].angle = _this.itemList[_this.index].rotate; //赋值

      //用过移动后的坐标赋值为移动前坐标
      _this.itemList[_this.index].tx = e.touches[0].clientX;
      _this.itemList[_this.index].ty = e.touches[0].clientY;
      _this.itemList[_this.index].anglePre = this.countDeg(_this.itemList[_this.index].x, _this.itemList[_this.index].y, _this.itemList[_this.index].tx, _this.itemList[_this.index].ty)

    },
    deleteItem(e){
      let _this = this;
      _this.itemList.splice(_this.index, 1);
      if (_this.itemList.length > 0) {
        _this.itemList[_this.itemList.length - 1].active = true; // 剩下图片组最后一个选中
      }
      _this.synthesis(); // 调用合成图方法
    },
    /*
   *参数cx和cy为图片圆心坐标
   *参数pointer_x和pointer_y为手点击的坐标
   *返回值为手点击的坐标到圆心的角度
   */
    countDeg(cx, cy, pointer_x, pointer_y) {
      var ox = pointer_x - cx;
      var oy = pointer_y - cy;
      var to = Math.abs(ox / oy);
      var angle = Math.atan(to) / (2 * Math.PI) * 360;
      if (ox < 0 && oy < 0) //相对在左上角，第四象限，js中坐标系是从左上角开始的，这里的象限是正常坐标系
      {
        angle = -angle;
      } else if (ox <= 0 && oy >= 0) //左下角,3象限
      {
        angle = -(180 - angle)
      } else if (ox > 0 && oy < 0) //右上角，1象限
      {
        angle = angle;
      } else if (ox > 0 && oy > 0) //右下角，2象限
      {
        angle = 180 - angle;
      }
      return angle;
    },
    // 计算坐标点到圆心的距离
    getDistancs(cx, cy, pointer_x, pointer_y) {
      var ox = pointer_x - cx;
      var oy = pointer_y - cy;
      return Math.sqrt(
        ox * ox + oy * oy
      );
    },
    synthesis(){
      let _this = this;
      maskCanvas.save();
      maskCanvas.beginPath();
      maskCanvas.setFillStyle('#fff');
      maskCanvas.fillRect(0, 0, _this.canvasWidth, _this.canvasHeight);
      maskCanvas.drawImage(_this.currentPosterBg, 0, 0, _this.originalW, _this.originalH, 0, 0, _this.canvasWidth, _this.canvasHeight);

      //console.log(_this.canvasWidth,_this.canvasHeight,_this.originalW,_this.originalH);
      _this.itemList.forEach((currentValue, index) => {
        maskCanvas.save();
        maskCanvas.translate(0, 0);
        maskCanvas.beginPath();
        maskCanvas.translate(currentValue.x * _this.hCw , currentValue.y  * _this.hCw); // 圆心坐标
        maskCanvas.rotate(currentValue.angle * Math.PI / 180);
        maskCanvas.translate(-(currentValue.width * _this.hCw * currentValue.scale / 2), -(currentValue.height * _this.hCw * currentValue.scale / 2))
        maskCanvas.drawImage(currentValue.image, 0, 0, currentValue.width * _this.hCw * currentValue.scale , currentValue.height * _this.hCw * currentValue.scale );
        maskCanvas.restore();
      });
      // reserve 参数为 false，则在本次调用绘制之前 native 层会先清空画布再继续绘制
      maskCanvas.draw(false, (e) => {
        wx.canvasToTempFilePath({
          canvasId: 'maskCanvas',
          success: res => {
            _this.canvasTemImg = res.tempFilePath;
          }
        }, this);
      });
    },
    savePoster(){
      let _this = this;
      console.log(_this.canvasTemImg);
      wx.saveImageToPhotosAlbum({
        filePath: _this.canvasTemImg,
        success: res => {
          showToast('保存成功',true)
        }
      });
    },
    downLoadBg(){
      let _this = this;
      _this.downLoadImg(_this.currentPoster.hd).then( res => {
        wx.saveImageToPhotosAlbum({
          filePath: res.path,
          success: res => {
            showToast('保存成功',true)
          }
        });
      });

    },

    uploadPics(){
      utils.getAlbum('album',(res)=>{
        //_this.imgUrl = res;
        //_this.showCroper = true;
      });
    }

  },

  created () {

  }
}
</script>

<style scoped>
.editorPG{
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #fff;

}
.editorPG .returnBack{
  position: fixed;
  top: 25px;
  left: 20px;
  width: 40px;
  height: 30px;
  background-color: rgba(255,255,255,0.7);
  z-index: 9999999;
  border-radius: 10px;
}
.editorPG .editorMain{
  width: 100%;
}
.editorPG .editorMain .editorBox{
  margin: 0 auto;
  background-color: #fff;
  position: relative;

}
.editorPG .editorMain .editorBox .bGImgView{
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}
.editorPG .editorMain .editorBox .contentWarp {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  overflow: hidden;
}
.editorPG .editorMain .editorBox .contentWarp .touchWrap {
  transform-origin: center;
  position: absolute;
  z-index: 100;
}

.editorPG .editorMain .editorBox .contentWarp .touchWrap .imgWrap {
  box-sizing: border-box;
  width: 100%;
  transform-origin: center;
  float: left;
  border: 2px transparent dashed;
}

.imgWrap div {
  float: left;
}

.editorPG .editorMain .editorBox .contentWarp .touchWrap .imgWrap.touchActive .x {
  display: block;
}

.editorPG .editorMain .editorBox .contentWarp .touchWrap .imgWrap.touchActive .o {
  display: block;
}
.x {
  position: absolute;
  top: -12px;
  left: -12px;
  z-index: 500;
  display: none;
  width: 20px;
  height: 20px;
  overflow: hidden;
  font-weight: bold;
  color: #d1e3f1;
  background: url("") no-repeat;
  background-size: cover;
}

.o {
  position: absolute;
  bottom: -12px;
  right: -12px;
  width: 20px;
  height: 20px;
  text-align: center;
  display: none;
  overflow: hidden;
  font-weight: bold;
  color: #d1e3f1;
  background: url("") no-repeat;
  background-size: cover;
}
.active {
  background-color: rgb(78, 114, 151);
}

.active view {
  border: none;
}

.touchActive {
  z-index: 400;
  padding: 1.5px;
}

.maskCanvas {
  position: absolute;
  left: -500%;
  top: -500%;
}

.editorPG .editorOptions{
  width: 90%;
  margin: 0 auto;
  height: 40px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-around;
  align-items: center;
  align-content: stretch;
}
.editorPG .editorOptions .copy{
  width: 15%;
  height: 100%;
  color: #999;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: stretch;
}
.editorPG .editorOptions .copy .copy-ico{
  width: 25px;
  height: 25px;
  background: url("") no-repeat;
  background-size: contain;

}
.editorPG .editorOptions .save{
  width: 39%;
  height: 100%;
  color: #fff;
  font-size: 16px;
  background-color: #f7a633;
  border-radius: 30px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: stretch;
}
.editorPG .editorOptions .save .save-ico{
  width: 20px;
  height: 20px;
  padding-right: 5px;
  background: url("") no-repeat;
  background-size: contain;
}
.editorPG .editorOptions .share{
  width: 39%;
  height: 100%;
  color: #fff;
  font-size: 16px;
  background-color: #4ac630;
  border-radius: 30px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: stretch;
  border: 0;
}
.editorPG .editorOptions .share .share-ico{
  width: 20px;
  height: 20px;
  padding-right: 5px;
  background: url("") no-repeat;
  background-size: contain;

}
.editorPG .bottomMain{
  width: 90%;
  margin: 0 auto;
  background-color: #F7F7F7;
  position: relative;
}
.editorPG .bottomMain .tab-nav{
  z-index: 1002;
  height: 40px;
  line-height: 40px;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  display: block;
  background-color: #f7f7f7;
  width: 100%;
  margin: 0 auto;
  box-shadow: 0 0px 15px #ddd;
}

.editorPG .bottomMain .tab-nav .tab-nav-item {
  height: 40px;
  position: relative;
  text-align: center;
  color: #585858;
  font-size: 16px;
  float: left;
 /* width: 33%;*/
  width: 50%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  align-content: stretch;
}
.editorPG .bottomMain .tab-nav .tab-nav-item .sm{
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 5px;
  background: url("") no-repeat;
  background-size: contain;
}

.editorPG .bottomMain .tab-nav .tab-nav-item.tab-active{
  color: #999;
  font-weight: bold;
  border-bottom: 2px solid #999;
}
.editorPG .bottomMain .tab-panel {
  position: relative;
  overflow: hidden;
  margin: 0;
  width: 100%;

}
.editorPG .bottomMain .tab-panel .tab-panel-item{
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  align-content: stretch;
}
.editorPG .bottomMain .tab-panel .list-scroll .tab-item {
  position: relative;
  float: left;
  padding: 5px 0;
  width: 27.333333%;
  height: 100px;
  box-sizing: border-box;
  margin: 5px 3% 0px 3%;
}
.editorPG .bottomMain .tab-panel .list-scroll .tab-item.itemActive {

}
.editorPG .bottomMain .tab-panel .list-scroll .tab-item img{
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 5px;
}

</style>
